const code1 =
    `
<script lang="ts">
import { defineComponent, onBeforeUnmount } from 'vue'
import * as paragraph from '../assets/text/lifecycle.js'
export default defineComponent({
    setup() {
        console.log('Lifecycle setup...',new Date().getTime())
        const img1 = new URL("../assets/img/lifecycle1.jpg", import.meta.url).href;
        const img2 = new URL("../assets/img/lifecycle2.jpg", import.meta.url).href;
        return {
            paragraph,
            img1,
            img2
        }
    },
    beforeCreate(){
        console.log('beforeCreate...',new Date().getTime())
        console.time('beforeCreate - created')
        
    },
    created(){
        console.timeEnd('beforeCreate - created')
        console.log('created...',new Date().getTime())
        console.time('created - beforeMount')
    },
    beforeMount(){
        console.timeEnd('created - beforeMount')
        console.log('beforeMount...',new Date().getTime())
        console.time('beforeMount - mounted')
    },
    mounted(){
        console.timeEnd('beforeMount - mounted')
        console.log('mounted...',new Date().getTime())
        
    },
    beforeUnmount(){
        console.log('beforeUnmount...',new Date().getTime())
        console.time('beforeUnmount - unmounted')
    },
    unmounted(){
        console.timeEnd('beforeUnmount - unmounted')
        console.log('unmounted...',new Date().getTime())
        //debugger
    },
    updated(){
        console.log('updated...',new Date().getTime())
    }

})
</script>
`
const text1 =
    `
打开开发者工具，查看控制台信息
setup最开始执行，依次是create mount
在切换路由销毁组件时，触发unmounted钩子函数
`
const text2 =
    `
在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后调用updated钩子函数
renderTracked：跟踪虚拟 DOM 重新渲染时调用。钩子接收 debugger event 作为参数。此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。
当虚拟 DOM 重新渲染被触发时调用renderTriggered
注意：slot中的数据更新导致的试图渲染不会触发此组建的updated，renderTriggered，renderTracked钩子函数
快去点击下方按钮并查看控制台信息试一试吧~
`
const code2 =
    `
<p>cart:{{cart}}</p>
<my-block>
    <div>
        插槽中的count:{{count}} （不会触发updated,renderTracked和renderTriggered钩子函数）
    </div>
    <button @click="addCount()">count++</button>
    &nbsp;&nbsp;
    <button @click="cart++">cart++</button>
</my-block>

renderTracked({ key, target, type }) {
    console.log('renderTracked',{ key, target, type })
    /* 当组件第一次渲染时，这将被记录下来:
    {
    key: "cart",
    target: {
        cart: 0
    },
    type: "get"
    }
    */
},
renderTriggered({ key, target, type }) {
    console.log('renderTriggered',{ key, target, type })
},
`

export { code1,code2, text1, text2 }